<template>
  <view class="container">
    <view class="card">
      <view class="card-item" v-for="(item, index) in dataList" :key="item.id">
        <view class="head">
          <view class="bd">
            {{ item.display_name }}
          </view>
          <view class="ft desc"> 默认 | {{ item.default_value }} </view>
        </view>
        <view class="body">
          <vInput :value="item.set_value" :disabled="true">
            <view
              class="input-ft color-active"
              slot="ft"
              @click="onClick(item, index)"
              >立即设定</view
            >
          </vInput>
        </view>
      </view>
    </view>

    <xModal title="阈值设定" v-model="isShowModal" @confirm="onConfirm">
      <view class="threshold-box">
        <vInput
          v-model="operator"
          :val="operatorText"
          type="picker"
          :range="thresholdCondition"
          align="left"
          placeholder="请选择"
          rangeKey="label"
          @change="onChange"
		  styleColor="true"
        >
        </vInput>
      </view>
      <view class="threshold-box">
        <vInput v-model="tempForm.set_value" styleColor="true"
		  placeholder="请输入"> </vInput>
      </view>
    </xModal>

    <Message ref="message"> </Message>
  </view>
</template>

<script>
import vInput from "@/components/public/input/input";
import xModal from "@/components/public/x-modal/x-modal";
import ViewModule from "@/common/mixins/view-module";
import { addDeviceThreshold } from "@/common/api/equipment";
export default {
  mixins: [ViewModule],
  components: {
    vInput,
    xModal,
  },
  data() {
    return {
      isShowModal: false,
      thresholdCondition: this.$getDictDataList("thresholdCondition"),
      dataForm: {
        set_value: "",
        mode: "",
      },
      operator: "",
      operatorText: "",
      tempForm: {
        operator: "",
        set_value: "",
      },
      dataList: [],
      mixinViewOptions: {
        getURL: "/getDeviceThresholdList",
        isPage: false,
        isShowLoading: false,
        reachBottom: false,
        createdIsNeed: false,
        pullDown: true,
      },
    };
  },
  methods: {
    fetchComplete(err, data, res) {
      let threshold = this.threshold || [];
      console.log(
        threshold,
        "??threshold",
        data.filter((i) => threshold.indexOf(i.field_key) !== -1)
      );
      return !threshold || !threshold.length
        ? data
        : data.filter((i) => threshold.indexOf(i.field_key) !== -1);
    },
    onClick(item) {
      this.isShowModal = true;
      this.tempForm = Object.assign({}, item);
    },
    onConfirm() {
      uni.showLoading({
        title: "提交中",
      });
      let f = this.tempForm;
      addDeviceThreshold({
        id: f.id,
        set_value: f.set_value,
        operator: f.operator ? Number(f.operator) : "",
      })
        .then((res) => {
          uni.hideLoading();
          if (res.code !== this.$ERR_OK) {
            return this.message.error(res.message || "提交修改失败");
          }
          this.getDataList();
        })
        .catch((err) => {
          uni.hideLoading();
        });
    },
    onChange(e) {
      this.operator = e;
      let item = this.thresholdCondition[e];
      this.dataForm.operator = item.value;
      this.tempForm.operator = item.value;
      this.operatorText = item.label;
      console.log(arguments, "?ar");
    },
  },
  onLoad(e) {
    if (!e.device_id) {
      return this.showModal({
        content: "非法参数!",
        success: (r) => this.$Router.go(-1),
      });
    }
    let threshold = e.threshold || "";
    threshold = threshold.split(",");
    this.threshold = threshold;
    this.dataForm.device_id = e.device_id;
    this.getDataList();
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';

.container {
  background: linear-gradient(180deg, #0d1523 0%, #102945 100%);
  min-height: calc(100vh - var(--window-top));
  padding: 30rpx 24rpx;

  .card {
    background: linear-gradient(180deg, #0d1523 0%, #102945 100%);;
    padding: 10rpx 20rpx 20rpx;
    font-size: 30rpx;
    font-family: PingFangSC-Regular;
    font-weight: 400;

    .head {
      display: flex;
      line-height: 1;
      padding: 24rpx 0;

      >.bd {
		color:color-white;
        flex: 1;
      }
    }
  }

  .desc {
    color: color-white;
  }
}

.input-ft {
  z-index: 3;
}

.threshold-box {
  margin-bottom: 20rpx;
  color: color-white;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>